<template>
	<!--移库确认列表-->
	<view class="bg-white">
		<cu-custom :bgColor="NavBarColor" :isBack="true" backRouterName="index">
			<block slot="backText">返回</block>
			<block slot="content">入库确认</block>
		</cu-custom>
		<view class="container">


			<mescroll-uni ref="mescrollRef" @init="mescrollInit" :top="top" @down="downCallback" @up="upCallback">
				<!-- 数据列表 -->
				<view class="al-list cu-list">
					<view
						class="message_text bg-white cu-item flex justify-around align-center solid-bottom margin-bottom-sm margin-top-sm"
						style="width: 100vw;" v-for="(item,index) in orderList" :key="index"
						@tap="detail(item)" :class="modalName=='move-box-'+ index?'move-cur':''"
						@touchstart="ListTouchStart" @touchmove="ListTouchMove" @touchend="ListTouchEnd"
						:data-target="'move-box-' + index">
						<view class="container">
							<view class="lable-font-style">编号：
							</view>
							<view v-html="detail.bussStorageNoticeCode">
							</view>
						</view>
						<view class="container" style="margin-top: 10px;">
							<view class="lable-font-style">名称：
							</view>
							<view v-html="item.materialName">
							</view>
							<view class="lable-font-style">规格：
							</view>
							<view v-html="detail.materialCode">
							</view>
						</view>
						<view class="container">
							<view class="lable-font-style">批次号：
							</view>
							<view v-html="detail.oriWarehouse_dictText">
							</view>
							<view class="lable-font-style">实收数量：
							</view>
							<view v-html="item.goalWarehouse_dictText">
							</view>
						</view>
						<view class="container">
							<view class="lable-font-style">单位：
							</view>
							<view v-html="">
							</view>
							<view class="lable-font-style">库位：
							</view>
							<view v-html="detail.goalLocation_dictText">
							</view>
						</view>
						<view class="action text-sm"
							style="color: #aaa;margin-top: -2em;margin-left: -13em;width: 10em;">
							<text>{{formatDate(item.sendTime,10)}}</text>
						</view>
						<view class="move">
							<view class="bg-red" style="margin-right: 3em;margin-left: 2px;"
								@tap.stop="deleteAnnotation(item)">删除</view>
						</view>
					</view>
				</view>
			</mescroll-uni>
		</view>

	</view>
</template>

<script>
	const tabs = [{
		title: '通知公告',
		value: 0
	}, {
		title: '系统消息',
		value: 1
	}];
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";


	export default {
		onLoad: function(option) {
			this.orderList=[]
			this.getList()
			uni.$on('refreshParentPage', () => {
			  // 执行刷新操作
			  console.log("111111111111111111111111111")
			 this.getList()
			 
			});
		},
		mounted() {
			uni.$on('barcode', function(data) {
				console.log("----------------------------------")
				console.log(data)
				//触发更新后
				// this.getList()
			})
		},

		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {

				tabs,
				TabCur: 0,
				scrollLeft: 0,
				NavBarColor: this.NavBarColor,
				upOption: {
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10 // 每页数据的数量
					},
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						tip: '~ 暂无数据 ~', // 提示

					},
					loading: '',
					text: '全部',
					isShowNoMore: false,
					textNoMore: '我是有底线的 >_<'
				},
				orderList: [], //列表数据
				read: "all",
				announcement1: [],
				msg1Count: "",
				msg1Title: "",
				announcement2: [],
				msg2Count: "",
				msg2Title: "",
				url:{
					queryToConfirmList: '/inorder/tslPdaInOrder/queryToConfirmList',
				},
				listTouchStart: 0,
				modalName: null,
				listTouchDirection: null,
				code: '',
				tslPdaInOrder:{},
			}
		},
		onShow() {
			if (this.mescroll) {
				this.mescroll.resetUpScroll()
			}
		},
		computed: {
			top() {
				return this.CustomBar * 2 + 95
			},
			style() {
				var StatusBar = this.StatusBar;
				var CustomBar = this.CustomBar;
				
				var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
				return style
			},
			
		},
		methods: {
			// unique(arr) {
			//     var obj = {};
			//     return arr.filter(function(item, index, arr){
			//         return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)
			//     })
			// },
			detail(item){
				console.log("obj"+item)
				console.log(item)
				uni.navigateTo({
					url: '/pages/package/inPackageDetail?item='+ encodeURIComponent(JSON.stringify(item))
				});
			},
			getList(){
			
			this.tslPdaInOrder.topCategoryCode = 2;
			console.log(this.tslPdaInOrder)
			
				//根据条码查询移库单数据
				this.$http.post(this.url.queryToConfirmList,this.tslPdaInOrder).then(res => {
					console.log(res)
					this.$tip.loaded();
					if (res.data.success) {
						
							this.orderList = res.data.result;
						
					}
				}).catch(() => {
					this.$tip.loaded();
					this.$tip.error('提交失败')
				});
			},
			// upCallback(page) {
			// 	//联网加载数据
			// 	console.log(this.orderList)
			// 	console.log("tabindex", this.TabCur)
				
			// 	let keyword = this.TabCur
			// 	if (keyword == 0) {
			// 		this.$http.get(this.url, {
			// 			params: {
			// 				pageNo: page.num,
			// 				pageSize: page.size,
			// 				code: this.code
			// 			}
			// 		}).then(res => {
			// 			//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
			// 			this.announcement1 = res.data.result.records
			// 			this.mescroll.endSuccess(this.announcement1.length);
			// 			//console.log("url", res)
			// 			//设置列表数据
			// 			if (res.data.success) {
			// 				console.log("res", res.data)
			// 				this.msg1Count = res.data.result.total
			// 				this.msg1Title = "通知(" + res.data.result.total + ")";
			// 				for (let annItem of this.announcement1) {
			// 					this.orderList.push(annItem)
			// 				}
			// 			}
			// 			if (page.num == 1) {
			// 				this.orderList = []; //如果是第一页需手动制空列表
			// 				this.orderList = this.orderList.concat(this.announcement1); //追加新数据
			// 			}

			// 		}).catch(() => {
			// 		// 	//联网失败, 结束加载
			// 			this.mescroll.endErr();
			// 		})
			// 	}
				

			// },

			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
				this.orderList = [] // 先置空列表,显示加载进度
				this.mescroll.resetUpScroll() // 再刷新列表数据
			},
			goAnnotationDetail(item) {
				console.log("itemId",item.id);
				//item.readFlag = '1'
				this.mescroll.resetUpScroll()
				// if (item.openType == "component" && item.openPage.indexOf('email') >= 0) {
				// 	this.goEmailDetailPage(item)
				// } else {
				// 	// console.log("detail",encodeURIComponent(JSON.stringify(item)))
				// 	uni.navigateTo({
				// 		url: '/pages/annotation/annotationDetail?item=' + encodeURIComponent(JSON.stringify(item))
				// 	});
				// }
			},
			
			
			ListTouchStart(e) {
				this.listTouchStart = e.touches[0].pageX
			},

			// ListTouch计算方向
			ListTouchMove(e) {
				this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
			},

			// ListTouch计算滚动
			ListTouchEnd(e) {
				if (this.listTouchDirection == 'left') {
					this.modalName = e.currentTarget.dataset.target
				} else {
					this.modalName = null
				}
				this.listTouchDirection = null
			},
			formatDate(text, len) {
				if (!text || text.length == 0) {
					return ''
				}
				if (text.length < len) {
					return text;
				}
				return text.substr(0, len)
			},
			titleFilter(text, len) {
				if (!text || text.length == 0) {
					return ''
				}
				if (text.length < len) {
					return text;
				}
				return text.substr(0, len) + "..."
			}

		}
	}
</script>

<style scoped>
	.e-btn {
		margin-bottom: 1rem;
	}

	.titlePad {
		margin-top: 0.6rem;
	}

	.cu-list>.move-cur {
		transform: translateX(-150rpx);

	}

	.nav .cu-item.cur {
		position: flex;
		z-index: 9;
		border-bottom: 4upx solid;
	}
	.input-border {
		border: 1px solid #ccc;
		/* 设置边框为灰色 */
		border-radius: 4px;
		/* 设置圆角 */
		padding: 2px 5px;
		/* 内边距 */
		margin: 4px;
		/* 外边距 */
		width: 80%;
		/* 宽度 */
		box-sizing: border-box;
		/* 防止宽度计算错误 */
	}
	
	.input-border {
		border: 1px solid #ccc;
		/* 设置边框为灰色 */
		border-radius: 4px;
		/* 设置圆角 */
		padding: 2px 5px;
		/* 内边距 */
		margin: 4px;
		/* 外边距 */
		width: 98%;
		/* 宽度 */
		box-sizing: border-box;
		/* 防止宽度计算错误 */
	}
	
	.cu-card.article>.cu-item .content .desc {
		flex: 0.2;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.border-class {
		border: 1px solid #000000;
		border-radius: 5px;
	}
	
	.container {
		display: grid;
		grid-template-columns: 1fr 2.3fr 1.3fr 2fr;
		/* 将容器分为两列，每列宽度相等 */
	}
	
	.left-view {
		background-color: red;
	}
	
	.right-view {
		background-color: blue;
	}
	.lable-font-style{
		font-family: '黑体';
		color: #999;
	}
</style>